<template>
  <div>
    <div class="container-fluid">
            <div class="userHeader">
              <img :src="img.Header" id="headPhoto"/>
            </div>
            <div id="userMain">
            <ul>
              <li class="btn btn-block btn-success"></li>
              <li class="btn btn-block btn-success"></li>
              <li class="btn btn-block btn-success"></li>
              <li class="btn btn-block btn-success"></li>
              <li class="btn btn-block btn-success"></li>
              <li class="btn btn-block btn-success"></li>
              <li class="btn btn-block btn-success"></li>
            </ul>
            </div>
              <div class="myfooter" id="myfooter">
                <ul class="nav nav-tabs fixed-bottom">
                    <!--<li class="nav-item" @click=""><a class="nav-link btn-block" href="#">私信</a> </li>-->
                    <li class="nav-item" v-on:click="say('Hi')">红包</li>
                    <!--<li class="nav-item"><a class="nav-link btn-block" href="#">个人</a> </li>-->
                </ul>
                <!--<ul>-->
                  <!--<li v-for="item in footNav" @click="selectMapNav(item.title)">-->
                    <!--<img :src="isSelect === item.title ? item.url1 : item.url" alt="">-->
                    <!--<p>{{item.title}}</p>-->
                  <!--</li>-->
                <!--</ul>-->
              </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'userHeader',
  data () {
    return {
          img:{
            Header:'../../static/image/userHeaderBackImg2.jpg',
          },
          isSelect: '红包',
          footNav: [
          {title: '我的', url: '../../../static/baiduMap/23@2x.png', url1: '../../../static/baiduMap/22@2x.png'},
          {title: '红包 ', url: '../../../static/baiduMap/11@2x.png', url1: '../../../static/baiduMap/10@2x.png'},
          {title: '私信 ', url: '../../../static/baiduMap/13@2x.png', url1: '../../../static/baiduMap/12@2x.png'},
      ]
    }
  },
  methods:{
    selectMapNav (title){
      this.isSelect = title },
    Say(str) {
      alert(str);
    },
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  *{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
  }
  a:link{
    text-decoration:none
  }
  a:active{
    text-decoration:none;
  }
  a:hover{
    text-decoration:none
  }
  body{

  }
  .userHeader{
    width: 100%;
    height: 150px;
    background: #0086b3;
    position: absolute;
  }
  .userHeader img{
    width: 80px;
    height: 80px;
    position: relative;
    right: 30%;
    top:20%;
    z-index: 10;
  }
  #userMain{
    width: 100%;
    padding: 150px;
  }
  #userMain ul{
    width: 100%;
  }
  #userMain li{
    width: 100%;
    height: 40px;
  }

  .myfooter ul {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    z-index: 1;
    background-color: #fff;
    display: flex;
    /*border-radius:30px 30px 0px 0px;*/
  }
  .myfooter li{
    text-align:center;
    flex:1;
    line-height: 50px;
  }
  .myfooter img{
    height:23px;
    width:23px;
    margin-top:5px;

  }
  .myfooter p{
    font-size:0.1rem;
    height:15px;
    line-height:10px;
  }
</style>
